<template>
  <div>
    <!-- {{ permissionInfo }} -->
    <el-table
      border
      row-key="id"
      :data="permissionInfo"
      style="margin: 15px 15px 0 15px"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="修改时间" prop="updateTime"></el-table-column>
      <el-table-column label="操作">
        <template #="{ row, $index }">
          <el-button
            type="primary"
            icon="Plus"
            size="small"
            @click="addPermission(row)"
            >添加菜单</el-button
          >
          <el-button
            type="primary"
            icon="Edit"
            size="small"
            :disabled="row.level === 1"
            @click="updatePermission(row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="Delete"
            size="small"
            :disabled="row.level === 1"
            @click="delPermission(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="添加菜单" width="500">
      <el-form :model="newPermission" ref="formRef">
        <el-form-item prop="name" label="名称" label-width="80px">
          <el-input v-model="newPermission.name"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="权限值" label-width="80px">
          <el-input v-model="newPermission.code"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="savePermission"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  reqAddPermission,
  reqDelPermission,
  reqGetPermissionList,
  reqUpdatePermission,
} from "../../../api/acl/menu";
import { ElMessage } from "element-plus";
import { endLoading, startLoading } from "../../../utils/loading";
import confirm from "../../../utils/confirm";

const dialogVisible = ref(false);
const formRef = ref();
const permissionInfo = ref([]);
const newPermission = reactive({ pid: "", name: "", code: "", id: "" });
const getPermissionInfo = async () => {
  let result = await reqGetPermissionList();

  permissionInfo.value = result.data;
  // console.log(permissionInfo.value);
};
onMounted(() => {
  getPermissionInfo();
  // console.log(permissionInfo.value);
});

const addPermission = (data: any) => {
  Object.assign(newPermission, {
    pid: "",
    name: "",
    code: "",
    id: "",
    children: [],
  });
  dialogVisible.value = true;
  newPermission.pid = data.id;
};

const updatePermission = (data: any) => {
  Object.assign(newPermission, data);
  dialogVisible.value = true;
};

const savePermission = async () => {
  console.log(newPermission);
  startLoading();
  if (newPermission.id) {
    let result = await reqUpdatePermission(newPermission);
    if (result.code === 200) {
      ElMessage.success("修改成功");
    } else {
      ElMessage.error("修改失败");
    }
  } else {
    let result = await reqAddPermission(newPermission);
    if (result.code === 200) {
      ElMessage.success("添加成功");
    } else {
      ElMessage.error("添加失败");
    }
  }
  dialogVisible.value = false;
  getPermissionInfo();
  endLoading();
};
const delPermission = (id: number) => {
  confirm("您确定要删除吗？", async () => {
    startLoading();
    let result = await reqDelPermission(id);
    if (result.code === 200) {
      ElMessage.success("删除成功");
    } else {
      ElMessage.error("删除失败");
    }
    getPermissionInfo();
    endLoading();
  });
};
</script>

<style lang="scss" scoped></style>
